<template>
    <div style="max-width: 450px; margin: 0 auto;">
        <div style="background-color: #008CA0; height: 3.5rem;"></div>
        <div>
            <van-nav-bar
            title="我的购物车"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <BtyTabBar/>
        <!-- 购物车列表 -->
        <div style="width: 25rem;">
            <el-table :data="car" stripe style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"/>
                <el-table-column type="index" width="50" />
                <el-table-column prop="serial" label="产品编号" width="100" />
                <el-table-column prop="title" label="名称" width="200" show-overflow-tooltip />
                <el-table-column prop="count" label="数量" width="180" />
                <el-table-column prop="total" label="总价" />
                <el-table-column label="操作">
                    <template v-slot:default="scope">
                        <el-button type="danger" :icon="Delete" circle @click="deleteCar(scope.row.id)" />
                        <el-button :icon="Search" circle @click="() => router.push({path: '/m/productDetail', query: {'id': scope.row.id}})" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div style="text-align: center;margin-top: 3rem;">
        <el-button type="primary" @click="forSubmitOrder">提交订单</el-button>    
    </div>
    <van-popup v-model:show="showLogin" style="height: 4rem; line-height: 4rem; text-align: center; width: 15rem;">
        用户未登录，请先登录
    </van-popup>
</template>


<script setup>
import BtyTabBar from '@/components/BtyTabBar.vue';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Delete,Search} from '@element-plus/icons-vue'
import { getCarOrder,delCarOrder, submitOrder } from '@/requests';
const router = useRouter();
const car = ref();
const selectionRow = ref();
const msg = ref();
const showLogin = ref(false);
const sleep =(ms) =>{
    return new Promise(resolve => setTimeout(resolve, ms));
};
const forCarOrder = async() =>{
    if (window.localStorage.getItem("token")) {
        const res = await getCarOrder();
        if (res.status === 2000){
            car.value = res.data;
        }else{
            console.log("获取列表失败")
        };        
    }else{
        showLogin.value = true;
        await sleep(1500);
        showLogin.value = false;
        router.push({path: '/m/login'})
    }

};

forCarOrder();

const deleteCar = async(id)=>{
    const res = await delCarOrder({"id": id})
    if (res.status === 2000){
        ElMessage.success("删除成功")
    }else{
        ElMessage.error("删除失败")
    };
    forCarOrder();
};

// 获取选择的行
const handleSelectionChange = (selection)=>{
    selectionRow.value = selection.map(row => row.id);
    console.log(selectionRow.value)
}

// 提交订单
const forSubmitOrder = async()=>{
    console.log(selectionRow)
    const res = await submitOrder({"ids": JSON.stringify(selectionRow.value)});
    if (res.status === 2000){
        msg.value = "提交订单成功";
        router.push({path: "/m/order"})
    }else{
        if(res.status === 4000){
            msg.value = res.msg;
        }else{
            msg.value = "提交订单失败";
        }
    }
}
const onClickLeft = () => history.back();

</script>